<!---->
<!--<p-accordion [multiple]="true">
    <p-accordionTab header="Scan Results" [selected]="true">
        <div class="p-grid">
            <div class="p-col-4 local-accordion-text-key" style="font-size: 20px">
                Current Network:
            </div>
            <div class="p-col-4 local-accordion-text-value">
                <input class="input-style-current" [disabled]="true" style="font-size: 20px"
                       placeholder="WLAN AP SSID" pInputText maxlength="24"
                       [(ngModel)]="this.currentAP">
            </div>
            <div class="p-col-2">
                <button pButton style="font-size: 20px;margin-top: 2px" label="Disconnect"
                        (click)="disConnect()"></button>
            </div>
        </div>
        <div class="p-grid">
            <div class="p-col-2">
            </div>
            <div class="p-col-8">
                <p-card>
                    <p-table selectionMode="multiple" [(selection)]="selectedApData"
                             [metaKeySelection]="true" dataKey="ssid" [value]="apData">
                        <ng-template pTemplate="body" let-product let-rowIndex="rowIndex" let-wifi>
                            <tr [pSelectableRow]="product" [pSelectableRowIndex]="rowIndex"
                                (click)="openPasswdDialog()">
                                <td style="font-weight: 600;font-size: 25px">{{wifi.ssid}}</td>
                            </tr>
                        </ng-template>
                    </p-table>
                </p-card>
            </div>
            <div class="p-col-2">
                <button style="font-size: 20px" pButton label="Refresh" (click)="getApJson()"></button>
            </div>
        </div>

    </p-accordionTab>
</p-accordion>
<br><br>-->
<!--            -->
<p-accordion [multiple]="true">
    <p-accordionTab header="WLAN AP" [selected]="true">
        <div>
            <div class="p-grid">
                <div class="p-col-6 local-accordion-text-key">
                    {{'SSID' | translate}}:
                </div>
                <div class="p-col-6 local-accordion-text-value">
                    <input class="input-style" placeholder="WLAN AP SSID" pInputText maxlength="24"
                           [(ngModel)]="this.WLANAPInformation.SSID">
                </div>
            </div>
            <div class="p-grid">
                <div class="p-col-6 local-accordion-text-key">
                    {{'security' | translate}}:
                </div>
                <div class="p-col-6 local-accordion-text-value">
                    <p-dropdown [style]="{'width':'200px'}" [options]="Security"
                                [(ngModel)]="selectedCountyCode" optionLabel="code"></p-dropdown>
                </div>
            </div>
            <div class="p-grid">
                <div class="p-col-6 local-accordion-text-key">
                    {{'password' | translate}}:
                </div>
                <div class="p-col-6 local-accordion-text-value">
                    <input class="input-style" placeholder="********" pInputText maxlength="24"
                           [(ngModel)]="this.WLANAPInformation.Password">
                </div>
            </div>
        </div>
        <div class="p-grid local-accordion-body">
            <div class="p-col-9">
            </div>
            <div class="p-col-3 p-grid">
                <div class="p-col-6 header-button-local">
                    <div>
                        <button class="button-type header-button-right"  pButton label="{{'apply_change' | translate}}" (click)="applyChange()"></button>
                    </div>
                </div>
                <div class="p-col-6 header-button-local">
                    <div>
                        <button class="button-type header-button-right" disabled pButton
                                label="{{'restore_default' | translate}}"></button>
                    </div>
                </div>
            </div>
        </div>
    </p-accordionTab>
</p-accordion>
<br><br>

<p-accordion [multiple]="true">
    <p-accordionTab header="{{'WLAN_client' | translate}}" [selected]="true">
        <div>
            <div class="p-grid" >
                <div class="p-col-6 local-accordion-text-key">
                    {{'SSID' | translate}}:
                </div>
                <div class="p-col-6 local-accordion-text-value" >
                    <input class="input-style" placeholder="{{this.WLANClientInformation.SSID}}" pInputText maxlength="24"
                           [(ngModel)]="this.WLANClientInformation.SSID" disabled>
                    &nbsp;
                    <button pButton type="button" label="{{'select'|translate}}" (click)="selectSSID()" style="font-size: 12px"></button>
                </div>
            </div>
            <div class="p-grid">
                <div class="p-col-6 local-accordion-text-key">
                    {{'security' | translate}}:
                </div>
                <div class="p-col-6 local-accordion-text-value">
                    <p-dropdown [style]="{'width':'200px'}" [options]="WLANSecurity"
                                [(ngModel)]="selectedWLANSecurity" (ngModelChange)="securityTableSwitch()"
                                optionLabel="type"></p-dropdown>
                </div>
            </div>
            <div class="p-grid" *ngIf="securityTableStatus">
                <div class="p-col-6 local-accordion-text-key">
                    {{'password' | translate}}:
                </div>
                <div class="p-col-6 local-accordion-text-value">
                    <input class="input-style" placeholder="********" pInputText maxlength="24"
                           [(ngModel)]="this.WLANClientInformation.password">
                </div>
            </div>
            <div class="p-grid">
                <div class="p-col-6 local-accordion-text-key">
                    {{'ip_address_type' | translate}}:
                </div>
                <div class="p-col-6 local-accordion-text-value">
                    <p-dropdown [style]="{'width':'200px'}" [options]="addressType"
                                [(ngModel)]="selectedAddressType" (ngModelChange)="networkTableSwitch()"
                                optionLabel="type"></p-dropdown>
                </div>
            </div>
            <div *ngIf="networkTableStatus">
                <div class="p-grid">
                    <div class="p-col-6 local-accordion-text-key">
                        {{'ip_address' | translate}}:
                    </div>
                    <div class="p-col-6 local-accordion-text-value">
                        <input class="input-style" placeholder="WLAN Client Static IP Address" pInputText
                               maxlength="24"
                               [(ngModel)]="this.WLANClientInformation.ipAddress">
                    </div>
                </div>
                <div class="p-grid">
                    <div class="p-col-6 local-accordion-text-key">
                        {{'netmask' | translate}}:
                    </div>
                    <div class="p-col-6 local-accordion-text-value">
                        <input class="input-style" placeholder="WLAN Client Static IP Netmask" pInputText
                               maxlength="24"
                               [(ngModel)]="this.WLANClientInformation.netmask">
                    </div>
                </div>
                <div class="p-grid">
                    <div class="p-col-6 local-accordion-text-key">
                        {{'gateway' | translate}}:
                    </div>
                    <div class="p-col-6 local-accordion-text-value">
                        <input class="input-style" placeholder="WLAN Client Static IP Gateway" pInputText
                               maxlength="24"
                               [(ngModel)]="this.WLANClientInformation.gateway">
                    </div>
                </div>
                <div class="p-grid">
                    <div class="p-col-6 local-accordion-text-key">
                        {{'o_primary_DNS' | translate}}:
                    </div>
                    <div class="p-col-6 local-accordion-text-value">
                        <input class="input-style" placeholder="WLAN Client Static IP Primary DNS"
                               pInputText maxlength="24"
                               [(ngModel)]="this.WLANClientInformation.primaryDNS">
                    </div>
                </div>
                <div class="p-grid">
                    <div class="p-col-6 local-accordion-text-key">
                        {{'o_secondary_DNS' | translate}}:
                    </div>
                    <div class="p-col-6 local-accordion-text-value">
                        <input class="input-style" placeholder="WLAN Client Static IP Secondary DNS"
                               pInputText maxlength="24"
                               [(ngModel)]="this.WLANClientInformation.secondaryDNS">
                    </div>
                </div>
            </div>
        </div>
        <div class="p-grid local-accordion-body">
            <div class="p-col-9">
            </div>
            <div class="p-col-3 p-grid">
                <div class="p-col-6 header-button-local">
                    <div>
                        <button class="button-type header-button-right"  pButton label="{{'apply_change' | translate}}" (click)="applyChange()"></button>
                    </div>
                </div>
                <div class="p-col-6 header-button-local">
                    <div>
                        <button class="button-type header-button-right" disabled pButton
                                label="{{'restore_default' | translate}}"></button>
                    </div>
                </div>
            </div>
        </div>
    </p-accordionTab>
</p-accordion>

<p-dialog [(visible)]="dialogApPasswdSwitch" [baseZIndex]="10000" [style]="{width: '700px'}"
          [draggable]="true" [resizable]="false"
          header="{{dialogApPasswdHeader}}" [modal]="true" styleClass="p-fluid">
    <hr>
    <div class="p-grid">
        <div class="p-col-2 text-font-size text-font-weight">Security :</div>
        <div class="p-col text-font-size">WPA2 PSK</div>
    </div>
    <br>
    <div class="p-grid">
        <div class="p-col-2 text-font-size text-font-weight" style="margin-top: 5px">
            {{'password' | translate}}:
        </div>
        <div class="p-col local-accordion-text-value">
            <input class="input-style text-font-size" placeholder="Password" pInputText maxlength="24"
                   [(ngModel)]="this.dialogApPassword">
        </div>
    </div>
    <br><br><br>
    <div class="p-grid">
        <div class="p-col-8"></div>
        <div class="p-col-2">
            <button pButton type="button" label="Cancel"
                    class="text-font-size"
                    (click)="closePasswdDialog()">
            </button>
        </div>
        <div class="p-col-2">
            <button pButton class="text-font-size" style="margin-left: 5px" label="OK"
                    (click)="apConnect()">
            </button>
        </div>
    </div>
</p-dialog>

<p-toast position="top-right"></p-toast>
<!--Apply Change dialog-->
<p-dialog header="{{'Configuration Change Confirmation'| translate}}" [(visible)]="display" styleClass="p-fluid"  [modal]="true" >
    {{'Are sure you want to make changes to the Configuration'| translate}}>?
    <br>
    {{'The changes will be only effective after the device been rebooted'| translate}}!

    <div class="p-grid local-accordion-body">
        <div class="p-col-4">
        <button class="button-type header-button-right"  pButton
                label="{{'cancel' | translate}}" (click)="cancel()"></button>
        </div>
        <div class="p-col-4">
        <button class="button-type header-button-right"  pButton
                label="{{'apply' | translate}}" (click)="apply()"></button>
        </div>
            <div class="p-col-4">
        <button class="button-type header-button-right"  pButton
                label="{{'apply & reboot' | translate}}" ></button>
            </div>
    </div>
</p-dialog>
<!--WLAN Client SSID Selection-->
<p-dialog header="{{'WLAN Client SSID Selection'| translate}}" [(visible)]="ssidDisplay" styleClass="p-fluid"  [modal]="true"  >

    <p-listbox [options]="this.cities" [(ngModel)]="selectedSSID" optionLabel="name" scroller="ture"  [listStyle]="{'max-height':'250px'}"></p-listbox>


    <div class="p-grid local-accordion-body">
        <div class="p-col-6">
            <button class="button-type header-button-right"  pButton
                    label="{{'cancel' | translate}}" (click)="selectCancel()"></button>
        </div>
        <div class="p-col-6">
            <button class="button-type header-button-right"  pButton
                    label="{{'ok' | translate}}" (click)="saveSelectSSID()"></button>
        </div>

    </div>
</p-dialog>
